<template>
  <div ref="baseTable" class="base-table">
    <div class="table-custom" :style="{ height: maxHeight + 'px' }">
      <el-table
        ref="table"
        v-loading="isRequesting"
        border
        :cell-class-name="cellClass"
        :cell-style="cellStyleClass"
        :class="[tableClass]"
        :data="tableData ? tableData : []"
        :header-cell-style="headerClass"
        :height="maxHeight"
        :row-style="{ height: '26px' }"
        style="width: 100%;font-size: 12px"
      >
        <slot name="header" />
        <slot name="default" />
        <slot name="end" />
      </el-table>
    </div>
    <div class="page-custom">
      <el-pagination
        :current-page="pageNumber"
        layout="total, prev, pager, next ,sizes,  jumper"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        small
        :total="total"
        @current-change="pageChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 当前页
    pageNumber: {
      default: 1,
      type: Number
    },
    // 数据总条数
    total: {
      default: 20,
      type: Number
    },
    pageSize: {
      default: 20,
      type: Number
    },
    tableData: {
      default: () => [],
      type: Array
    },
    isRequesting: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      maxHeight: 0,
      tableClass: ''
    }
  },
  watch: {
    tableData: {
      handler: function() {
        this.initTableStyle()
      },
      immediate: true
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeEvent)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeEvent)
  },
  methods: {
    initTableStyle() {
      this.$nextTick(() => {
        const baseTableEle = this.$refs['baseTable']
        const scrollingNoneEle = baseTableEle.getElementsByClassName('is-scrolling-none')
        const maxHeight = baseTableEle.offsetHeight - 30
        if (scrollingNoneEle.length > 0) {
          this.tableClass = 'no-16'
        } else {
          this.tableClass = 'has-16'
        }
        this.maxHeight = maxHeight
      })
    },
    sizeChange(val) {
      this.$emit('update:pageSize', val)
      this.$emit('query')
    },
    pageChange(val) {
      this.$emit('update:pageNumber', val)
      this.$emit('query')
    },
    cellStyleClass({ row, column, rowIndex, columnIndex }) {
      if (column.fixed === 'right') {
        return ';color: #092c4d !important;padding:5px 0;'
      } else {
        return 'padding:5px 0;'
      }
    },
    headerClass({ row, column, rowIndex, columnIndex }) {
      if (column.fixed === 'right') {
        return 'background: #d0d8e2 !important;color: #092c4d;padding:1px;'
      } else {
        return 'background: #fafafa !important;padding:1px;'
      }
    },
    resizeEvent() {
      this.initTableStyle()
    },
    cellClass() {
      return 'no-border'
    }
  }
}
</script>
<style lang="scss" scoped>
.base-table {
  position: absolute;
  top: 36px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  .page-custom {
    height: 30px;
  }

  /deep/ .el-pagination {
    padding-top: 8px;
    display: flex;
    justify-content: center;
  }

  /deep/ .el-table {
    border-left: none;
  }

  // /deep/ .no-border {
  //   border-right: 1px solid transparent !important;
  // }
  /deep/ .el-input__inner {
    height: 22px;
    line-height: 22px;
  }

  .no-16 {
    /deep/ .el-table__fixed {
      height: 100% !important;
    }
    /deep/ .el-table__fixed-right {
      height: 100% !important;
    }
  }

  .has-16 {
    /deep/ .el-table__fixed {
      height: calc(100% - 12px) !important;
    }
    /deep/ .el-table__fixed-right {
      height: calc(100% - 12px) !important;
    }
  }
  // 表格的滚动条样式设置
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    height: 10px; // 纵向滚动条
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
    background-clip: padding-box;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
  }
}
</style>
